<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body id="app">
<h3>用户注册</h3>

邮箱：<input type="text" id="email" name="email"> <br/>
密码：<input type="text" id="password" name="password"> <br/>
昵称：<input type="text" id="nickname" name="nickname"> <br/>
年龄：<input type="text" id="age" name="age"> <br/>
性别：<select id="gender" name="gender">
    <option value="1">男</option>
    <option value="2">女</option>
</select> <br/>
电话：<input type="text" id="telephone" name="telephone"> <br/>
地址：<input type="text" id="address" name="address"> <br/>
<button v-on:click="this.registration()">注册</button>

<script>
    //定义app
    const app = {

        //数据绑定
        data() {
            return {}
        },
        //事件绑定
        methods: {
            //用户注册
            registration: function () {
                axios({
                    method: "post", url: "/registration", data: {
                        email: document.getElementById("email").value,
                        password: document.getElementById("password").value,
                        nickname: document.getElementById("nickname").value,
                        gender: document.getElementById("gender").value,
                        age: document.getElementById("age").value,
                        telephone: document.getElementById("telephone").value,
                        address: document.getElementById("address").value
                    }
                }).then((response) => {
                    if (response.data === 'ok') {
                        alert("注册成功！")
                    } else {
                        alert(response.data)
                    }

                });
            }
        },

        //构造方法
        mounted() {
            console.log("vue启动成功！")
        }
    }

    //启动app
    Vue.createApp(app).mount("#app")
</script>
</body>
</html>